<template>
  <div class="home">
    <top-header></top-header>
    <div class="home-cen">
      <div class="home-left">
        <h3 class="left-title">内存使用率</h3>
        <div style="height: 620px; width: 530px" id="meminfo"></div>
      </div>

      <div class="home-rigth">
        <h3 class="left-title">系统设置</h3>
        <el-form :model="formData" ref="submitForm">
          <el-form-item prop="sulv" style="font-weight: 700;" label="限制速率大小">
            <el-input v-model="formData.sulv"></el-input>
          </el-form-item>

          <el-form-item prop="ncdx" style="font-weight: 700;" label="限制内存大小">
            <el-input v-model="formData.ncdx"></el-input>
          </el-form-item>

          <el-form-item prop="khdsl" style="font-weight: 700;" label="限制客户端容量">
            <el-input v-model="formData.khdsl"></el-input>
          </el-form-item>

          <el-button type="primary" @click="handleLogin('submitForm')"
            >保存并重启服务</el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import TopHeader from "@/components/TopHeader";
export default {
  data() {
    return {
      formData: {
        sulv: "512",
        ncdx: "10m",
        khdsl: "4",
      },
    };
  },
  components: {
    "top-header": TopHeader,
  },
  methods: {
    initChart: function () {
      let mychart = echarts.init(document.getElementById("meminfo"));
      let option = {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%",
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: "业务指标",
            type: "gauge",
            detail: { formatter: "{value}%" },
            data: [{ value: 50, name: "完成率" }],
          },
        ],
      };
      option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
      mychart.setOption(option);
    },
    handleLogin: function (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            type: "success",
            message: "提交成功",
          });
        } else {
          this.$message({
            type: "warning",
            message: "提交失败",
          });
        }
      });
    },
    
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style lang="scss" scoped>
.home {
  background: #ccc;
  height: 100%;
}
.home-cen {
  display: flex;
  justify-content: space-between;
}
.home-left {
  width: 530px;
  margin-top: 20px;
  margin-left: 50px;
  border-top: 5px solid blue;
  background: white;
  
}
h3 {
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
    border-bottom: 1px solid #ccc;
  }
.home-rigth {
  width: 530px;
  height: 650px;
  background: white;
  margin-top: 20px;
  border-top: 5px solid blue;
  margin-right: 50px;
  .el-form{
    margin: 10px;
    .el-form-item{
      margin-bottom: 11px;
    }
  }
}
</style>